<template>

<van-pull-refresh
    v-model="isLoading"
    success-text="刷新成功"
    @refresh="onRefresh"
  >
    <div class="video">
        <!-- <h3> 九列表的视频4</h3> -->

        <div class="product">
      <div class="shuju" v-for="(item,index) in productDataVidio" :key = index >
        <!-- v-for="(item,index) in productDataVidio" :key = index -->
   
        <div class="content">
          <div class="top" >
            <div class="authorimg"><img :src="item.r.a.p" alt="" />  </div>

            <div class="left">
              <div class="introduce">
                <div class="thelv" >
                  <p>{{item.r.a.n}}</p>

                  <span>LV.{{item.r.a.lvl}} </span>
                </div>
              </div>
            </div>
            <div class="right"> </div>
          </div>
        </div>

        
        <!-- <div class="title">
            <div class="have">已有 4600     人学做这个菜 </div>
            <div> &gt; </div>
        </div> -->

        <div class="theimg">
           <video :src="item.r.vfurl" controls="controls" width="100%" height="100%" ></video>
          <!-- <img :src="item.r.img" alt="" /> -->
          <!-- <video src="" controls="" autoplay="" name=""  ><source :src=" item.r.vfurl "> </video> -->
          <p class="title"> </p>
        </div>

         <div class="foot">
          <div class="firrow">
            <div class="left" >
              <div class="collect" >
                <div class="imgs" v-for="(autitem,index) in item.r.collect_users " :key=index >
                  <img class="img isone" :src="autitem.p" alt="" />
                  <img class="img istwo" :src="autitem.p" alt="" />
                  <img class="img isthree" :src="autitem.p" alt="" />
                  <img class="img isfour" :src="autitem.p" alt="" />
                </div>

                <p>{{item.r.collect_count_text}}</p>
              </div>
            </div>

            <div class="right">
              <div class="one icon">
                <van-icon name="star-o" size="20px" />
              </div>
          
            
            </div>
          </div>

          <div class="tworow">
            <p>{{item.r.collect_count_text}}</p>
          </div>

          <div class="thrrow">
            <p>{{item.r.n}}</p>
            <p></p>
          </div>
        </div> 
      </div>
    </div>

    </div>
  </van-pull-refresh>
</template>

<script>
    export default {
        name:"Video",

        data(){
       return{
        count: 10,
         isLoading: false,
        productDataVidio:[],
        
        tabIndex:0,
        //订单数据
        orderData:[]
    };
  },

  created(){
    this.GetRecommend();
    // this.orderData
  },
  methods:{
     onRefresh() {
            setTimeout(() => {
                Toast('刷新成功');
                this.isLoading = false;
                this.count+=10;
                this.GetRecommend();
            }, 1000);
        },
    GetRecommend(){
        this.axios({
        method: "get",
        url: `https://apis.netstart.cn/douguo/home/videos/${this.count}/20`,
        //get请求参数写在params中
        params: {
          appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
          offset: "0",
          limit: "20",
        },
      })
        .then((result) => {
          console.log("result==>", result);
          if (result) {
            
          }
          this.productDataVidio = result.data.result.list;
      
          let vidio = this.productDataVidio.filter( (item) => {
            return item.type == 1
          } )
          .map( (item) => {
            return item;
          })
          this.productDataVidio = vidio;
        
          console.log("视频的数据==>", vidio);
          console.log(" this.productDataVidio==>", this.productDataVidio);
          //输出结果看一下
      ;
        })
        .catch((err) => {
          console.log("err==>", err); //用来捕获错误

          // console.log("err==>",err);
        });
    },
  },
    }
</script>

<style lang="less" scoped>
.video{

    .product {
    .shuju {
      .content {
        .top {
          padding-top: 30px;
          padding-left: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding-bottom: 16px;

          .authorimg {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            padding-right: 10px;
            text-align: center;
            img {
              display: block;
              width: 100%;
              border-radius: 50%;
            }
          }
          .left {
            margin-left: 0;
            .introduce {
              .thelv {
                display: flex;
                justify-items: center;
                align-items: center;
                p {
                  color: #313131;
                  margin: 0;
                  font-size: larger;
                  font-weight: 800;
                }
                span {
                  margin-left: 8px;
                  font-weight: 900;
                  font-size: small;
                  color: #d7b96a;
                  font-style: oblique;
                }
              }

              p {
                margin: 0;
                font-size: small;
                font-weight: 700;
                color: #bcbcbc;
              }
            }
          }
          .right {
            margin: 0;
            // width: 80px;
            // height: 35px;
            border-radius: 50%;
            text-align: center;
            // line-height: 35px;
            font-size: medium;
            font-weight: 1000;
            color: #2c2c2a;
          }
        }

        .top div:nth-child(3) {
          margin-left: auto;
          margin-right: 15px;
        }
      }

      .theimg {
        box-sizing: border-box;
        overflow: hidden;
        // img {
        //   width: 100%;
        //   height: 100%;
        //   object-fit: cover;
        // }
        .video{
            width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .foot {
        .firrow {
          padding-left: 20px;
          display: flex;
          justify-content: center;
          align-items: center;

          .left {
            .collect {
              justify-content: center;
              align-items: center;
              display: flex;    
                .imgs {
                border: 1px solid #ffffff;
                display: flex;
                box-sizing: border-box;
             
                overflow: hidden;
                text-align: center;
                // .isone{
                //     margin-left: -26px;
                // }
                .istwo{
                    margin-left: -20px;
                }
                .isthree{
                    margin-left: -20px;
                }
                .isfour{
                    margin-left: -20px;
                }
                img {
                  
                  width: 20px;
                  height: 20px;
                  display: block;
                  width: 100%;
                  margin-left: -5px;
                  border-radius: 50%;
                }
              }


              .imgs .isone {
                margin: 0;
              }

              p {
                color: #4b4b4b;
                font-size: small;
                font-weight: 800;
                margin-left: 8px;
              }
            }
          }
          .right {
            display: flex;
            margin-left: auto;
            align-items: center;
            margin-right: 16px;

            box-sizing: border-box;
            overflow: hidden;
            .thr {
              padding: 0px !important;
              .isthr {
                padding: 0px;
                background-color: red;
              }
            }
            .icon {
              width: 20px;
              height: 20px;
              text-align: center;
              padding-right: 20px;

              img {
                width: 20px;
                height: 20px;
                display: block;
                width: 100%;
                border-radius: 50%;
              }
            }
          }
        }
        .tworow {
          margin: 0;
          p {
            margin: 0;
            padding-left: 15px;
            font-size: medium;
            font-weight: 700;
          }
        }
        .thrrow {
          margin: 0;
          p {
            margin: 0;
            color: #569aa3;
            padding-top: 6px;
            padding-left: 15px;
            font-size: medium;
            font-weight: 800;
            // margin-bottom: 30px;
          }
        }
      }
    }
  }


}

</style>